<template>
  <div class="my_div">
    <div class="img">
      <img :src="item.dogImgUrl" alt="" />
      <p :style="{ backgroundColor: `rgba(${color})` }" @click="btn(item.dogName)">
        {{ item.dogName }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: "",
    };
  },
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    btn(name) {
      this.color = "";
      for (let i = 0; i < 3; i++) {
        let a1 = parseInt(Math.random() * 256);
        this.color += i == 2 ? a1 : a1 + ",";
      }
      this.$emit('btn', name);
    },
  },
};
</script>

<style>
.my_div {
  width: 200px;
  border: 1px solid black;
  text-align: center;
}

.my_div img {
  width: 100%;
  height: 200px;
}
</style>